<!DOCTYPE html>

<html>
  <head>
        <meta charset="utf-8">
        <title>中国地图</title>
  </head>
<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
	var width  = 1000;
	var height = 1000;

	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(0,0)");

	var projection = d3.geo.mercator()
						.center([107, 31])
						.scale(850)
    					.translate([width/2, height/2]);

	var path = d3.geo.path()
					.projection(projection);


	var color = d3.scale.category20();


	d3.json("{{ url_for('static', filename='china.json') }}", function(error, root) {

		if (error)
			return console.error(error);
		console.log(root.features);

		svg.selectAll("path")
			.data( root.features )
			.enter()
			.append("path")
			.attr("stroke","#000")
			.attr("stroke-width",1)
			.attr("fill", function(d,i){
				return color(i);
			})
			.attr("d", path )
			.on("mouseover",function(d,i){
                d3.select(this)
                    .attr("fill","yellow");
            })
            .on("mouseout",function(d,i){
                d3.select(this)
                    .attr("fill",color(i));
        svg.selectAll("circle")
                    .data(root.features)
                    .enter()
                    .append("circle")
                    .attr("class","center")
                    .attr("cx",function(d,i){
                    	return projection(d.properties.cp)[0]
                    })
                    .attr("cy",function(d,i){
                    	return projection(d.properties.cp)[1]
                    })
                    .attr("r",5)
            });

	});

</script>

</body>
</html>